<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>个人信息</title>
	<link rel="stylesheet" type="text/css" href="../css/userInfo.css"/>
</head>
<body>
	<div id="app">
		<div class="wrapper">
			<!-- 菜单栏区域 -->
		    <nav>
				<div class="nav-img">
					<div class="background-img"></div>
				</div>
				<div class="nav-menu">
					<ul>
						<li><a href="javascript:void(0)"><span class="icon-task"></span>我的任务</a></li>
						<li><a href="javascript:void(0)"><span class="icon-project"></span>项目管理</a></li>
						<li><a href="javascript:void(0)"><span class="icon-problem"></span>问题管理</a></li>
						<li><a href="javascript:void(0)"><span class="icon-evaluate"></span>任务评价</a></li>
						<li><a href="javascript:void(0)"><span class="icon-archives"></span>档案库</a></li>
						<li><a href="javascript:void(0)"><span class="icon-organization"></span>组织管理</a></li>
						<li><a href="javascript:void(0)"><span class="icon-user"></span>用户管理</a></li>
					</ul>
				</div>
			</nav>
			<!-- 头部信息区域 -->
		    <header>
				<div class="user-header-info">
					<ul>
						<li><a href="javascript:void(0)"><span class="icon-user"></span>切换账号</a></li>
						<li><a href="javascript:void(0)"><span class="icon-user"></span>消息</a></li>
						<li><a href="javascript:void(0)"><span class="icon-user"></span>退出</a></li>
						<li><a href="javascript:void(0)"><img src="../images/user.jpg" alt=""></a></li>
					</ul>
				</div>
			</header>
			<!-- 个人信息内容区域 -->
		    <div class="contain">
		        <div class="user-contain">
					<!-- 个人信息 -->
		            <div class="user-contain-head">
						<h4>个人信息</h4>
						<a href="javascrip:;" @click.prevent="show"><span class="icon-update"></span>修改</a>
					</div>
					<!-- 个人信息详情 -->
					<div class="user-detail">
						<div class="user-detail-item">
							<label for="">账号名</label>：
							<input type="text" class="user-input" v-model="userInfo.username" readonly="readonly">
						</div>
						<div class="user-detail-item">
							<label for="">姓名</label>：
							<input type="text" class="user-input" v-model="userInfo.name" readonly="readonly">
						</div>
						<div class="user-detail-item">
							<label for="">性别</label>：
							<input type="text" class="user-input" v-model="userInfo.gender" readonly="readonly">
						</div>
						<div class="user-detail-item">
							<label for="">密码</label>：
							<input type="text" class="user-input" v-model="userInfo.password" readonly="readonly">
						</div>
					</div>
					<!-- 模态框内容 -->
					<div class="model-contain" ref="showModel">
					    <!-- 透明背景 -->
					    <div class="opacity-back"></div>
					    <!-- 模态框盒子 -->
					    <div class="model-box">
					        <div class="model-header">
					            <h5>个人信息</h5>
					            <span class="close" @click="close">×</span>
					        </div>
							<!-- 修改个人信息表单 -->
					        <div class="model-body">
								<form action="">
									<div class="form-container">
										<div class="update-userinfo">
											<div class="update-userinfo-item">
												<label for=""><span class="red">*</span>账号名</label>：
												<input type="text" class="user-update-input" v-model="updateUserInfo.username">
											</div>
											<div class="update-userinfo-item">
												<label for=""><span class="red">*</span>姓名</label>：
												<input type="text" class="user-update-input" v-model="updateUserInfo.name">
											</div>
										</div>
										<div class="update-userinfo">
											<div class="update-userinfo-item">
												<label for=""><span class="red">*</span>性别</label>：
												<div class="select-item">
													<input type="text" v-model="updateUserInfo.gender" readonly class="tender-choose" placeholder="请选择"><i class="triangle"></i>
													<select class="tender-select" v-model="updateUserInfo.gender">
														<option value ="男">男</option>
														<option value ="女">女</option>
													</select>
												</div>
											</div>
											<div class="update-userinfo-item">
												<label for=""><span class="red">*</span>密码</label>：
												<input type="text" class="user-update-input" v-model="updateUserInfo.password">
											</div>
										</div>
									</div>
									<div class="user-option">
										<div class="user-option-item">
											<a href="javascript:;" class="pad" @click.prevent="close">取消</a>
											<a href="javascript:;" @click.prevent="update(updateUserInfo)">保存</a>
										</div>
									</div>
								</form>
					        </div>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
	</div>
	
	<script src="../lib/vue.js"></script>
	
	<script>
	var vm = new Vue({
		el:'#app',
		data:{
			object: {
				username: 'zhangsan001',
				name: '张三',
				gender: '男',
				password: '123456'
			},
			userInfo: '',  // 用户信息
			updateUserInfo: '' // 用户修改的信息
		},
		created() {
			this.getUserInfo(this.object)
		},
		methods:{
			// 获取用户信息
			getUserInfo(obj) {
				this.userInfo = JSON.parse(JSON.stringify(obj))
			},
			// 模态框显示 
			show() {
				this.updateUserInfo = this.object
				this.$refs.showModel.style.display = 'block'
			},
			// 模态框隐藏 
			close() {
				this.$refs.showModel.style.display = 'none'
			},
			// 修改个人信息
			update(updateUserInfo) {
				this.getUserInfo(updateUserInfo)
				this.$refs.showModel.style.display = 'none'
			}
		}
	})
	</script>
</body>
</html>